<!DOCTYPE html>
<html lang="zh-CN"
      xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8">
    <title>layui</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" th:href="@{layui/css/layui.css}" media="all">

</head>
<style type="text/css">
    .layui-table-cell {
        height: 100px;
        /*line-height: 28px;*/
        padding: 0 15px;
        position: relative;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        box-sizing: border-box;
        vertical-align: middle;
        text-align: center;
    }

    .layui-table img {
        max-width: 100px;
        max-height: 100px;
        margin-top: 10px;
    }
</style>
<body>
<table class="layui-hide" id="test" lay-filter="test"></table>
<input type="hidden" id="product-id" name="productId" th:value="${proId}">
<script type="text/html" id="toolbarDemo">
    <div class="layui-btn-container">
        <button class="layui-btn layui-btn-sm" lay-event="getCheckData" onclick="addGuigeByProductId()">增加规格</button>
        <!--<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>-->
        <!--<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>-->
    </div>
</script>
<script type="text/html" id="barDemo">
    <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
    <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<script th:src="@{layui/layui.js}" charset="utf-8"></script>
<script type="text/javascript" th:src="@{/shoppingApi/js/jquery-3.3.1.min.js}"></script>
<script type="application/javascript" th:src="@{/shoppingApi/js/common.js}"></script>

<script th:inline="none">
    layui.use('table', function () {
        var table = layui.table;
        table.render({
            elem: '#test'
            , url: '/getGuiGePriceData'
            , cellMinWidth: 50
            , toolbar: '#toolbarDemo'
            , title: '用户数据表'
            , totalRow: true
            , cols: [[
                {type: 'checkbox', fixed: 'left'}
                , {field: 'productId', title: '商品ID'}
                , {field: 'guigeId', title: '规格ID'}
                , {field: 'guigeName', title: '规格名称'}
                , {field: 'imgurl', title: '规格图片', templet: '<div><img src="{{d.imgurl}}" ></div>'}
                , {field: 'proWeight', title: '重量(kg)'}
                , {field: 'proSize', title: '大小'}
                , {field: 'proTiji', title: '体积(cm3)'}
                , {field: 'proColor', title: '颜色'}
                , {field: 'proVolume', title: '容积(L)'}
                , {field: 'proLength', title: '长(mm)'}
                , {field: 'proWidth', title: '宽(mm)'}
                , {field: 'proHeight', title: '高(mm)'}
                , {field: 'buyCount', title: '个人限购数量'}
                , {field: 'buyCountTotal', title: '限购总数量'}
                , {field: 'priceId', title: '价格ID'}
                , {field: 'proPrice', title: '商城价'}
                , {field: 'opratorCost', title: '运营成本'}
                , {field: 'coupon', title: '兑换券'}
                , {field: 'huiyuan', title: '返积分'}
                , {field: 'dianzhu', title: '店主折扣券'}
                , {field: 'yzDianzhu', title: '优质店主折扣券'}
                , {field: 'visitor', title: '返代金券'}
                , {field: 'otherRank', title: '返购物券'}
                , {fixed: 'right', title: '操作', toolbar: '#barDemo'}
            ]]
            , page: true

        });

        table.reload('testReload', {
            url:'/getGuiGePriceData',
            page: {
                curr: 1
            }
        });


        //监听行工具事件
        table.on('tool(test)', function (obj) {
            var data = obj.data;
            //console.log(obj)
            if (obj.event === 'del') {
                layer.confirm('真的删除行么', function (index) {
                    obj.del();
                    var guigeId = data['guigeId'];
                    var priceId = data['priceId'];
                    delGuiGeAndPrice(guigeId, priceId);//删除规格及价格
                    layer.close(index);
                });
            } else if (obj.event === 'edit') {
                var guigeId = data['guigeId'];
                WinOpenAdd(guigeId);//编辑规格及价格
            }
        });


    });

    function Format(datetime, fmt) {
        if (parseInt(datetime) == datetime) {
            if (datetime.length == 10) {
                datetime = parseInt(datetime) * 1000;
            } else if (datetime.length == 13) {
                datetime = parseInt(datetime);
            }
        }
        datetime = new Date(datetime);
        var o = {
            "M+": datetime.getMonth() + 1,                 //月份
            "d+": datetime.getDate(),                    //日
            "h+": datetime.getHours(),                   //小时
            "m+": datetime.getMinutes(),                 //分
            "s+": datetime.getSeconds(),                 //秒
            "q+": Math.floor((datetime.getMonth() + 3) / 3), //季度
            "S": datetime.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt))
            fmt = fmt.replace(RegExp.$1, (datetime.getFullYear() + "").substr(4 - RegExp.$1.length));
        for (var k in o)
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
        return fmt;
    }

    var body;

    function WinOpenAdd(guigeId) {
        layer.open({
            type: 2
            , title: '编辑规格'
            , content: '/editorGuiGe?guigeId=' + guigeId
            , area: ['820px', '620px']
            , btn: ['确定', '取消']
            , yes: function (index, layero) {
                body = layer.getChildFrame('body', index); //得到iframe页的body内容
                getGuiGeData();
            }
        });
    }

    function getGuiGeData() {
        var productId=body.find("#productId").val();
        var guigeId = body.find("#guigeId").val();
        var guigeName = body.find("#guigeName").val();
        var proWeight = body.find("#proWeight").val();
        var proSize = body.find("#proSize").val();
        var proTiji = body.find("#proTiji").val();
        var proColor = body.find("#proColor").val();
        var proVolume = body.find("#proVolume").val();
        var proLength = body.find("#proLength").val();
        var proWidth = body.find("#proWidth").val();
        var proHeight = body.find("#proHeight").val();
        var proPrice = body.find("#proPrice").val();
        var productCost = body.find("#productCost").val();
        var opratorCost = body.find("#opratorCost").val();
        var coupon = body.find("#coupon").val();
        var huiyuan = body.find("#huiyuan").val();
        var dianzhu = body.find("#dianzhu").val();
        var yzDianzhu = body.find("#yzDianzhu").val();
        var visitor = body.find("#visitor").val();
        var priceId = body.find("#priceId").val();
        var buyCount=body.find("#buyCount").val();
        var buyCountTotal=body.find("#buyCountTotal").val();
        $.ajax({
            type: 'post',
            url: '/updateGuiGePrice',
            data: {
                productId:productId,
                guigeId: guigeId,
                guigeName: guigeName,
                proWeight: proWeight,
                proSize: proSize,
                proTiji: proTiji,
                proColor: proColor,
                proVolume: proVolume,
                proLength: proLength,
                proWidth: proWidth,
                proHeight: proHeight,
                proPrice: proPrice,
                productCost: productCost,
                opratorCost: opratorCost,
                coupon: coupon,
                huiyuan: huiyuan,
                dianzhu: dianzhu,
                yzDianzhu: yzDianzhu,
                visitor: visitor,
                priceId: priceId,
                buyCount:buyCount,
                buyCountTotal:buyCountTotal
            },
            success: function (res) {
                if (res.msg == '1') {
                    layer.msg("修改成功！");

                } else {
                    layer.msg("修改失败！");
                }
            }
        })
    }

    //删除规格及价格
    function delGuiGeAndPrice(guigeId, priceId) {
        $.ajax({
            url: '/delGuiGeAndPrice?guigeId=' + guigeId + '&priceId=' + priceId,
            success: function (res) {
                if (res.msg == '1') {
                    layer.alert("删除成功！");
                } else {
                    layer.alert("删除失败！");
                }
            }
        })
    }

    //添加规格
    var proId = $('#product-id').val();
    function addGuigeByProductId() {
            window.location.href='/openAddGuige?productId='+proId;
    }


</script>


</body>

</html>